<template>
<p>通过设置名为 <code>date-cell</code> 的 <code>scoped-slot</code> 来自定义日历单元格中显示的内容。 在 <code>scoped-slot</code> 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。 详情解释参考下方的 API 文档。</p>
  <el-calendar>
    <template #date-cell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '✔️' : '' }}
      </p>
    </template>
  </el-calendar>
</template>

<style>
.is-selected {
  color: #1989fa;
}
</style>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>